<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端组件化</title>
		<script src="../js/vue.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css" />
	</head>
	<body>
		
		<div id="parent" class="col-lg-offset-2">
			<h1  class="page-header">父组件向子组件传值</h1>
			<div>
				<h3>{{message}}<h3>
			</div>
			<child-component :fatherslove="SomeWord"></child-component>
		</div>
	<script type="text/x-template" id="child_container">
		<div class="list-group col-lg-4">
			<h3>Son's component</h3>
			<div class="list-group-item">
				<a href="javascript:void(0);">{{fatherslove}}</a>
			</div>
		</div>
	</script>
	</body>
	<script>
		Vue.component('childComponent',{
			template:'#child_container', 
			props:[
				'fatherslove' //错误示范类型：[]	
			]
		})
		var parent = new Vue({
			el:'#parent',
			data:{
				message:'Father\'s component.',
				SomeWord:'Father says:I love my son Bob'
			}
		})
		
	</script>
</html>
